import React from 'react';
import "./index.less"
import { SearchBar, InputItem, List } from 'antd-mobile';
import TabBarExample from 'components/tabBar'
import TopBarExample from 'components/topBar'


export default class Classify extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            searchVal: '',  // 头部输入框
            bgColor:'',
            leftList: ['专业科目', '专业科目', '专业科目'],
            tabIndex: 0,
            goodList: ['专业科目', '专业科目', '专业科目'],
        }
    }

    componentDidMount() {
    }

    onChange = (value) => {
        this.setState({ value });
    };

    addVConsolePackage = () => {
        console.log(this);
        // 点击顶部左侧按钮
        // this.setState(prevState => ({ ticketId: prevState.ticketId + 1 }));
        this.setState({
            ticketId: 213
        })
    };

    tabClick = (index) => {
        this.setState({
            goodList: []
        })
        this.setState({
            tabIndex: index
        })
        setTimeout(() => {
            this.setState({
                goodList: ['专业科目', '专业科目', '专业科目']
            })
        }, 100);
    };

    goDetail = (res) => {
        this.props.history.push({pathname:'/classify/good/detail/', state:{id:123}})
    };

    render() {
        return (
            <div className="classify">
                {/*<TopBarExample title={'分类'}></TopBarExample>*/}
                <div className="home-content">
                    <div className="top">
                        <SearchBar
                            value={this.state.searchVal}
                            placeholder="搜索"
                            cancelText="搜索"
                            onSubmit={value => console.log(value, 'onSubmit')}
                            onClear={value => console.log(value, 'onClear')}
                            onCancel={() => console.log('onCancel')}
                            showCancelButton
                            onChange={this.onChange}
                        />
                    </div>
                    <div className="main-content">
                        <div className="left-tag-list">
                            {
                                this.state.leftList.map((res, index) => {
                                    return <div key={index} className={index == this.state.tabIndex ? "active left-tag" : "left-tag"} onClick={() => { this.tabClick(index) }}>
                                        {res}{index}
                                    </div>
                                })
                            }
                        </div>
                        <div className="right-list">
                            {
                                this.state.goodList.map((res, index) => {
                                    return <div key={index} className="right-item-good" onClick={() => { this.goDetail(res) }}>
                                        {res}
                                    </div>
                                })
                            }
                        </div>
                    </div>
                </div>
                <TabBarExample selectedTab={'classify'}></TabBarExample>
            </div>
        );
    }
}

